<template>
  <div class="usermodule-container">
    <header class="header">
      <h1>欢迎光临</h1>
    </header>
    <main class="main">
      <section class="section-left">
        <el-avatar shape="square" :size="50" :src="userInfo.avatar"></el-avatar>
      </section>
      <section class="section-right">
        <article class="art-item">用户名：{{ userInfo.username }}</article>
        <article class="art-item">身份：{{ userInfo.role }}</article>
      </section>
    </main>
    <footer class="footer">
      <div class="footer-top footer-item">
        <el-button type="danger" plain size="mini" @click="logout">退出登录</el-button>
        <el-button type="success" plain size="mini" @click="toMySpace">个人空间</el-button>
        <el-button type="primary" plain size="mini" @click="toPublish">发布文章</el-button>
      </div>
      <div class="footer-bottom footer-item">
        <el-button type="success" plain size="mini">好友列表</el-button>
      </div>
    </footer>
  </div>
</template>

<script>
// import eventBus from '@/plugins/eventBus'

export default {
  name: 'UserModule',
  props: {
    newUserInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      userInfo: {}
    }
  },
  methods: {
    // getUserInfo (val) {
    //   console.log(val)
    //   this.userInfo = val
    // },
    async logout () {
      var userId = localStorage.getItem('_id')
      // 移除token等信息
      localStorage.removeItem('username')
      localStorage.removeItem('_id')
      localStorage.removeItem('token')
      localStorage.removeItem('avatar')
      localStorage.removeItem('role')
      // 传递信息 UserModule -> BlogHome 子向父传值
      const comName = 'Tabs'
      this.$emit('logoutInfo', comName)
      const { data: res } = await this.$api.logout({ userId })
      console.log(res)
      if (res.err_code === 0) {
        // 提示信息
        this.$notify({
          title: '成功',
          message: res.message,
          type: 'success'
        })
        this.$router.replace('/')
      }
    },
    // 个人中心
    toMySpace () {
      this.$router.push('/blog/myspace')
    },
    toPublish () {
      this.$router.push('/blog/publish')
    },
    async queryUser (id) {
      const { data: res } = await this.$api.queryOne({ _id: id })
      this.userInfo = res.data
      // console.log(res)
    }
  },
  created () {
    // eventBus.$on('headerShare', this.getUserInfo)
    // this.userInfo = this.newUserInfo
    // this.userInfo = this.newUserInfo
    const _id = localStorage.getItem('_id')
    if (_id) {
      this.queryUser(_id)
    }
  },
  watch: {
    newUserInfo: function (newVal) {
      this.userInfo = newVal
      console.log(newVal)
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  font-size: 18px;
  margin-bottom: 10px;
}
.main {
  display: flex;
  // justify-content: center;
  margin-bottom: 10px;
}
.main .section-left {
  flex: 2;
}
.main .section-right {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  flex: 3;
}
.section-right .art-item {
  font-size: 14px;
}
.footer-item {
  margin-bottom: 10px;
}
</style>
